<template>
    <div id="login">
      <vue-particles
        class="login-bg"
        color="#39AFFD"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#8DD1FE"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
      <div class="content">
        <el-form
          ref="ruleFormss"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="pass" label-width="80px">
            <el-input v-model="ruleForm.pass"  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="checkPass" label-width="80px">
            <el-input
              v-model="ruleForm.checkPass"
              type="password"
              autocomplete="off"
            ></el-input>                  
          </el-form-item>
          <el-form-item label="验证码" prop="age" label-width="80px">
            
              <p class="pp">
            <el-input v-model="ruleForm.age" class="inp"></el-input>
                
          <!-- <img class="img" :src="'http://localhost:3000/imagecode?' + timer" alt="" @click="imgclick" /> -->
              </p>
   
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button>
            <el-button @click="resetForm()">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
   
  <script setup>
  import { reactive, ref, onBeforeMount, onMounted } from "vue";
  import { useRouter } from "vue-router";
      const ruleFormss = ref(null);
      const router = useRouter();
      const submitForm=()=> {
        ruleFormss.value.validate();
        let obj = {
        name: ruleForm.pass,
        pwd: ruleForm.checkPass,
        imgcode: ruleForm.age,
        };

        // getlogin(obj).then((res) => {
        // console.log(res);
        // if (res.data.status === 200) {
        //     // console.log(res.data.data);

        //     store.dispatch("user/setmenus",res.data.data)
        //     // console.log)
        //     sessionStorage.setItem("toekn", res.data.token);
        //     router.push("/list");
        // }
        // });
    }
      const imgclick=()=> {
        // console.log(timer.value)
        timer.value = Date.now();
    }
      const timer = ref(Date.now());
      const ruleForm = reactive({
        pass: "",
        checkPass: "",
        age: "",
      });
      const rules = {
        pass: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
        checkPass: [{ required: true, trigger: "blur", message: "密码不能为空" }],
        age: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
      };
      onBeforeMount(() => {});
      onMounted(() => {
        console.log("3.-组件挂载到页面之后执行-------onMounted");
      });
  </script>
  <style scoped lang='less'>
  .el-input {
    margin-bottom: 15px;
    
  }
  .pp{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .img{
    width: 100px;
    height: 50px;
    position: relative;
    top: -8px;
  }
  ::v-v-deep .el-form-item{
    margin-bottom: 54px;
  }
  ::v-deep .el-form-item__label{
    text-align:left; 
    padding-left: 10px;
  }
  ::v-deep .el-input__inner{
    width: 245px;
    // margin-right: 40px;
    // position: relative;
  }
  .content {
    width: 450px;
    height: 430px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* 有了这个就自动居中了 */
    background: white;
  }
   
  .login {
    width: 100%;
    height: 100%;
    background: yellowgreen;
     color: #cccccc;
    /*如果想做背景图片 可以给标签一个class 直接添加背景图*/
   
    background-image: url("/");
    position: relative;
  }
   
  .login-bg {
    width: 100%;
    height: 100vh;
    background: #3e3e3e;
  }
  </style>